<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸</title>
		<style>
			/* 1 +100 取值：选择器被选中的几率增加 */
			div#d1{
				width: 50%;
				height: 500px;
				/* 颜色色值：透明度：遮罩层，左栏 */
				background: rgba(243, 35, 134, .5);
	
			}
				/* 最大宽度与最小宽度 */
				div#container{
					background: #f0f0f0;
				}
				div#box{
					background: #ff0e42;
					color: #fff;
					width: 80%;
					/* 最小宽度：设定，宽度最大上限600px，移动端 */
					min-width: 500px;
					/* 最大宽度：设定，不能改变，移动端 */
					max-width: 650px;
					/* 页面设定最大与最小宽高，约定 移动端宽高比，页面错乱 */
				}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度‘
		 自适应：编写页面在任何浏览器下正常显示-->
		 <div>
		 <div class="box">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quidem aliquam accusantium. Atque et, ipsam fugit sapiente corrupti voluptatibus soluta cumque possimus est rem, ipsum cum natus? Magnam, quasi facere!</div>
	    </div>
	</body>
</html>